{% extends "hall.html" %}
{% block details %}
<ul>
    <p style="text-align: center;">about me</p>
    <li>
        <img src="{{headShot}}" title="???" height="50px" width="50px">
    </li>
    <br>
    <li>nickname</li><textarea rows="1" cols="80%" style="color: black;text-align: center;" id="nickname">{{nickname}}</textarea>
        <!-- <textarea></textarea> -->
    <li>email</li><textarea rows="1" cols="80%" style="color: black;text-align: center;" disabled>{{email}}</textarea>
    <button type="button" class="btn" style="margin-left: 30%;" id="apply" onclick="apply()">apply</button>
</ul>
<script>
    function apply(){
        $.ajax({
            url:'{% url 'hall:aboutme' %}',
            type:'POST',
            data:{
                'nickname':document.getElementById('nickname').value,
            },
            dataType:'json',
            success:alert("success!"),
        })
    }
</script>
<style>
ul li{
    text-align: left;
}
li textarea{
    text-align: center;
}
</style>
{% endblock %}